import React, { Component } from 'react'

// import store from './store'
import { connect } from 'react-redux'

import { CHANGE_BANNER_LIST, CHANGE_PRO_LIST } from './store/types'

class Page2 extends Component {
    componentDidMount() {
        this.props.getBannerList()
        this.props.getProList()
    }

    render() {

        const bannerList = (<ul>
            {this.props.bannerList.map(item => {
                return (<li key={item.bannerid}>
                    <img style={{ width: 100 }} src={item.img} alt="" />
                </li>)
            })}
        </ul>)


        const proList = (<ol>
            {this.props.proList && this.props.proList.map(item => {
                return (<li key={item.proid}>
                    {item.proname}
                </li>)
            })}
        </ol>)

        return (
            <div>
                <h1>Page2 - {this.props.count} </h1>

                {bannerList}

                {proList}

            </div>
        )
    }
}




export default connect((state) => {

    // 将全局状态映射到 props 中
    return {
        count: state.app.count,
        bannerList: state.pro.bannerList,
        proList: state.pro.proList
    }
}, (dis) => {
    // 将修改函数映射到 props 中
    return {
        getBannerList() {
            // 发送数据请求
            // XMLHttpRequest
            fetch('/banner/list')
                .then(res => res.json())
                .then(res => {
                    // console.log(res.data);
                    dis({
                        type: CHANGE_BANNER_LIST,
                        payload: res.data
                    })
                })
        },
        getProList() {
            fetch('/pro/list')
                .then(res => res.json())
                .then(res => {
                    // console.log(res.data);
                    dis({
                        type: CHANGE_PRO_LIST,
                        payload: res.data
                    })
                })
        }
    }
})(Page2)
